<template>
	<view class="namelist">
		<view  v-if="!auditShow">
			<other></other>
		</view>
		<view v-if="auditShow">
			<view class="namelist_item flex_row_between_center" v-for="(item,index) in list" :key="index" @click="natTo('/pages/moreModule/name/nameInfo',item)">
				<view class="flex_row_between_center namelist_item_left">
					<view class="ge">
						<view class="ge1"></view>
						<view class="ge2"></view>
						<view class="ge3" v-if="list && list.length>0">{{item.name.slice(0,1)}}</view>
					</view>
					<view class="ge">
						<view class="ge1"></view>
						<view class="ge2"></view>
						<view class="ge3"  v-if="list && list.length>0">{{item.name.slice(1,2)}}</view>
					</view>
					<view class="ge"  v-if="(list && list.length>0) && item.name.slice(2,3) ">
						<view class="ge1"></view>
						<view class="ge2"></view>
						<view class="ge3"  v-if="(list && list.length>0) && item.name.slice(2,3) ">{{item.name.slice(2,3)}}</view>
					</view>
				</view>
				<view class="namelist_item_right" >
					<view class="namelist_item_right_1">【五行相配】</view>
					<view class="namelist_item_right_2">查看详情</view>
				</view>
			</view>
			<loadingState
			   v-if="loadingState == 'first_loading' || list.length > 0"
			    :state="loadingState"
			  />
		</view>
	</view>
</template>

<script>
	import loadingState from "@/components/loading-state.vue";
	import other from '@/components/other/index.vue'
	export default{
		components: {
			loadingState,
			other
		},
		data(){
			return{
				list:[],
				current: 1, //分页
				loadingState:'first_loading',
				objInfo:{},
				auditShow:true,
			}
		},
		onLoad(options){
			this.getAudit()
			if ('params' in options) {
			      let obj = JSON.parse(decodeURIComponent(options.params));
				  console.log(obj);
				  this.objInfo=obj
				 this.getList(obj.name)
				
			 }
			  // this.getList()
			 
			
		},
		onReachBottom(){
			console.log('12');
			// let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
			// this.current=this.current+1
			//  this.getList()
		},
		methods:{
			//获取微信审核开关
			getAudit(){
			    let param = {};
				param.url='v3/system/front/configuration/1'
				this.$request(param).then(res=>{
					console.log(res);
					this.auditShow=res.data.auditSwitch
					if(this.auditShow){
						uni.setNavigationBarTitle({
							title:'起名'
						})
					}
				})
			},
			natTo(url,item){
				// 要传递的对象参数
				const obj = {
					nameGradeId:item.nameGradeId,
					name:item.name,
					year: this.objInfo.year,
					month: this.objInfo.month,
					day: this.objInfo.day,
					hour: this.objInfo.hour,
					minute: this.objInfo.minute,
					gender: this.objInfo.gender,
					isLeap: this.objInfo.isLeap,
				}
				// const obj = {
				// 	nameGradeId:item.nameGradeId,
				// 	name:item.name,
				// 	year:2020 ,
				// 	month: 12,
				// 	day: 10,
				// 	hour: 12,
				// 	minute: '00',
				// 	gender: '男',
				// 	isLeap: null,
				// }
				console.log('obj',obj);
				
				// 将对象参数转为JSON字符串，并使用encodeURIComponent编码
				const params = encodeURIComponent(JSON.stringify(obj));
				
				// 跳转页面并传递对象参数
				uni.navigateTo({
				   url: `${url}?params=${params}`
				});
			},
			getList(name){
				let _this=this
				let param = {};
				param.url='v3/name/grade/front/list'
				param.data={}
				param.data.pageSize = 100;
				param.data.current = this.current;
				param.data.name=name
				
				this.$request(param).then(res=>{
					// console.log(res.data.list);
					_this.list=_this.list.concat(res.data.list)
					this.loadingState='no_more_data'
					// console.log('this.list',this.list);
				})
			},
		}
	}
</script>

<style lang="scss">
	
	.namelist{
		padding: 20rpx 32rpx;
	}
	.namelist_item{
		padding: 30rpx 40rpx;
		border-radius: 30rpx;
		background-color: #fff;
		margin-bottom: 28rpx;
	}
	
	.namelist_item_left{
		width: 400rpx;
	}
	.namelist_item_right{
		width: 206rpx;
		padding-left: 20rpx;
	}
	.namelist_item_right_1{
		color: #ae4530;
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}
	.namelist_item_right_2{
		width: 170rpx;
		color: #fff;
		text-align: center;
		padding:10rpx 20rpx;
		border-radius: 25rpx;
		background:linear-gradient(to bottom, #f7d065 ,#f3b24e);
	}
	.ge{
		width: 100rpx;
		height: 100rpx;
		// border: 2rpx dashed #a4a4a4;
		border: 2rpx solid #a4a4a4;
		position: relative;
		overflow: hidden;
		
	}
	.ge1{
		position: absolute;
		left: 50%;
		top: 0;
		width: 20rpx;
		height: 100%;
		border-left: 2rpx dashed #a4a4a4;
	}
	.ge2{
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 2rpx;
		border-bottom: 2rpx dashed #a4a4a4;
	}
	.ge3{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-size: 60rpx;
		font-weight: bold;
		
	}
</style>